
.kzHeightFour {
  position: relative;
  overflow: hidden;
}

.kzHeightFour::before {
  content: '';
  position: absolute;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
  background-size: 40rpx 40rpx;
  width: 140%;
  height: 50rpx;
  left: 140%;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: rotateZ(-45deg);
  animation: kzHeightFour 3.5s infinite;
}

@keyframes kzHeightFour {
  0%,36%{
    left: -140%;
  }
  86%,100% {
    left: 140%;
  }
}

@keyframes kzStar{
  0%,75%{
    opacity: 0;
    transform: scale(0);
  }
  85%{
    opacity: 1;
    transform: scale(1.3);
  }
  100%{
    opacity: 0;
    transform: scale(0.8) rotate(20deg);
  }
}

.kzStar{
  width: 30rpx;
  height: 30rpx;
  position: absolute;
  right: 5%;
  top: 0;
  bottom: 20%;
  margin: auto;
  animation: kzStar 3.5s infinite linear;
}
@keyframes kzHover1 {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.kzHover1 {
  --count: infinite;
  --time: .8s;
  animation: kzHover1 var(--time) var(--count) !important;
}

.kzRotate {
  animation-name: kzRotate;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes kzRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(1turn);
  }

  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(1turn);
  }
}

.kzMusic {
  position: relative;
  --contentBefore: '♫';
  --contentAfter: '♩';
  --color: #000000;
  --zIndex: 9999;
  z-index: var(--zIndex);
}

.kzMusic::after,
.kzMusic::before {
  position: absolute;
  left: -10%;
  bottom: -30%;
  color: var(--color);
  z-index: calc(var(--zIndex) - 1);
  opacity: 0;
  transform: translateY(0) translateX(0) scale(0);
}

.kzMusic::after {
  content: var(--contentAfter);
  animation: kzMusic 2.5s 1.25s linear infinite;
}

.kzMusic::before {
  content: var(--contentBefore);
  animation: kzMusic 2.5s linear infinite;
}

@keyframes kzMusic {
  0% {
    transform: translateX(0) translateY(0) scale(0);
    opacity: 0;
  }

  5% {
    transform: translateY(0) translateX(0) scale(.6);
    opacity: 1;
  }

  50% {
    transform: translateX(-40rpx) translateY(-50rpx) scale(1);
    opacity: 1;
  }

  90% {
    transform: translateX(-50rpx) translateY(-100rpx) scale(1);
    opacity: 0;
  }

  93% {
    transform: translateX(-50rpx) translateY(-100rpx) scale(0);
    opacity: 0;
  }

  100% {
    transform: translateX(0) translateY(0) scale(0);
    opacity: 0;
  }
}
.kzRotateAndScale {
  transform-origin: left bottom;
  animation: kzRotateAndScale 1.2s .3s ease-in-out infinite;
}

@keyframes kzRotateAndScale {
  0% {
    transform: rotate(0) scale(1);

  }

  30% {
    transform: rotate(0) scale(1);
  }

  45% {
    transform: rotate(-10deg) scale(.8);
  }

  65% {
    transform: rotate(-20deg) scale(.8);
  }

  100% {
    transform: rotate(0) scale(1);
  }
}

.kzShake {
  transform-origin: center bottom;
  animation: kzShake 2s 0.5s ease-out infinite;
}

@keyframes kzShake {
  0% {
    transform: rotate(0deg);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }

  10% {
    transform: rotate(-12deg);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }

  20% {
    transform: rotate(12deg);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }

  28% {
    transform: rotate(-10deg);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }

  36% {
    transform: rotate(10deg);
    transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  42% {
    transform: rotate(-8deg);
    transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  48% {
    transform: rotate(8deg);
    transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  52% {
    transform: rotate(-4deg);
    transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  56% {
    transform: rotate(4deg);
    transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  60% {
    transform: rotate(0deg);
    transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
  }

  100% {
    transform: rotate(0deg);
    transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
  }
}
@keyframes kzJittery1{
  5%, 50% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.9);
  }
  15% {
    transform: scale(1.15);
  }
  20% {
    transform: scale(1.15) rotate(-5deg);
  }
  25% {
    transform: scale(1.15) rotate(5deg);
  }
  30% {
    transform: scale(1.15) rotate(-3deg);
  }
  35% {
    transform: scale(1.15) rotate(2deg);
  }
  40% {
    transform: scale(1.15) rotate(0);
  }
}

.kzJittery1{
  animation: kzJittery1 4s infinite;
}

